import {PickerView, PickerViewColumn, View} from '@tarojs/components'
import {observer} from 'mobx-react'

import './index.less'
import BaseComponent from "../../../pages/BaseComponent";
import LogService from "../../../service/LogService";


@observer
class Index extends BaseComponent {

  static defaultProps = {
    itemHeight: 28,
    unit: "单位",
    values: [],
    value: undefined,
    onSelect: undefined,
  };


  onChange = e => {
    const val = e.detail.value;

    const {onSelect, values, value} = this.props;
    if (!!onSelect) {
      onSelect(values[val[0]]);
    }

    LogService.debug("onChange", values[val[0]], value)
  }

  render() {

    const {itemHeight, unit, values, value} = this.props;

    let selectIndex = 0;
    for (let i = 0; i < values.length; i++) {
      if (values[i] == value){
        selectIndex = i;
        break;
      }
    }

    return (
      <PickerView className='pick_view' maskClass='mask'
                  // indicatorStyle={{height: itemHeight}}
                  // style={{height: itemHeight * 5}}
                  indicatorClass='indicator'
                  value={[selectIndex]}
                  onChange={this.onChange}
      >
        <PickerViewColumn>
          {values.map(item => {
            return (
              <View className='pick_text'>{item + "  " + unit}</View>
            );
          })}
        </PickerViewColumn>
      </PickerView>
    )
  }
}

export default Index
